<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-block">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-input
          v-model="input1"
          class="box-input"
          placeholder="搜索职位"
          prefix-icon="el-icon-search"
        />
        <!-- 选择框 -->
        <!-- <el-select v-model="formInline.region" class="box-input" placeholder="请选择小区">
          <el-option label="万达" value="shanghai" />
        </el-select> -->
        <el-select v-model="formInline.region" class="box-input" placeholder="请选择小区">
          <el-option
            v-for="task in taskList"
            :key="task.communityId"
            :label="task.communityName"
            :value="task.communityId"
          />
        </el-select>

        <el-button type="success" icon="el-icon-search">搜索职位</el-button>
        <el-button type="primary" @click="showxingzen=true">新增部门</el-button>
        <el-button type="danger">批量删除</el-button>

      </el-form>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
        />
        <el-table-column
          prop="communityName"
          label="小区名称"
          align="center"
          width="220"
        />
        <el-table-column
          prop="name"
          label="职位名称"
          align="center"
          width="220"
        />
        <el-table-column
          prop="des"
          label="职位描述"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 页面 -->
      <el-row type="flex" justify="center" style="height: 50px" align="middle">
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <xingzen-form :show-dialog.sync="showxingzen" />
  </div>
</template>

<script>
import xingzenForm from './xingzen-form.vue'
import { getposition, getcommunityName } from '@/api/paopao/position'
export default {
  components: {
    xingzenForm
  },
  data() {
    return {
      showxingzen: false, // 弹出新增修改
      input1: '', // 搜索框
      taskList: [], // 下拉框数据
      formInline: {
        communityId: '',
        communityName: '',
        region: ''
      }, // 选择框
      page: {
      // 放置页面相关数据
        page: 1,
        pagesize: 10,
        total: 50 // 记录总数
      },
      tableData: [{
        communityName: '', // 小区名称
        createTime: '', // 创建时间
        name: '', // 职位名称
        des: '' // 职位描述
      }],
      multipleSelection: []
    }
  },
  created() {
    this.getposition()
    this.getcommunityName()// 获取下拉框数据
  },
  methods: {
    async getposition() {
      this.tableData = await getposition({
        info: '', pageIndex: 1, pageSize: 10, communityId: 0
      })
    },
    async getcommunityName() {
      this.taskList = await getcommunityName()
    },
    handleEdit() {
      this.showxingzen = true
      console.log('修改')
    },
    handleDelete() {
      console.log('删除')
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getSalarysList()
    }
  }
}
</script>

<style>
.box-block{

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.box-input{
    margin: 20px;
    width: 150px;
}
</style>
